<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自己写的时间年轮</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            background-color: #F9F9FB;
            padding: 400px;
        }

        @font-face {
            font-family: 'iconfont';
            /* Project id 4366399 */
            src: url('//at.alicdn.com/t/c/font_4366399_lwpsu41p2x.woff2?t=1702234713568') format('woff2'),
                url('//at.alicdn.com/t/c/font_4366399_lwpsu41p2x.woff?t=1702234713568') format('woff'),
                url('//at.alicdn.com/t/c/font_4366399_lwpsu41p2x.ttf?t=1702234713568') format('truetype');
        }

        .iconfont {
            font-family: "iconfont";
            font-size: 16px;

        }

        .circle-container {
            position: relative;
            width: 300px;
            height: 300px;
        }

        .center-circle {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 100px;
            /* 圆的直径 */
            height: 100px;
            /* 圆的直径 */
            background-color: white;
            border-radius: 50%;
            z-index: 4;
            /* 对于圆形 */
            transform: translate(-50%, -50%);
            box-shadow: 0px 4px 12px rgba(70, 0, 255, 0.1), 0px 16px 32px rgba(165, 135, 255, 0.3);

        }

        .center-circle2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 200px;
            /* 圆的直径 */
            height: 200px;
            /* 圆的直径 */
            background-color: #B8A7CD;
            border-radius: 50%;
            /* 对于圆形 */
            transform: translate(-50%, -50%);
            box-shadow: 0px 4px 12px rgba(70, 0, 255, 0.1), 0px 16px 32px rgba(165, 135, 255, 0.1);

        }

        .center-circle3 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 350px;
            /* 圆的直径 */
            height: 350px;
            /* 圆的直径 */
            background-color: #E5DCF2;
            border-radius: 50%;
            z-index: -1;
            /* 对于圆形 */
            transform: translate(-50%, -50%);

        }

        .clapboard {
            position: absolute;
            /* border:  1px solid red; */
            width: 300px;
            height: 500px;
            top: -100px;
            left: -150px;
            z-index: 2;
            background-color: #F9F9FB;
            background: radial-gradient(circle at 100% 50%, #AE9DC5 0%, #F9F9FB 60%);
            display: none;
        }

        .rectangles {
            position: absolute;
            list-style: none;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-around;
            /* 通过修改这里来调整长方形之间的间距 */
            animation: gongzhuan 10s infinite linear;
            /* 持续时间、无限重复、线性时间函数 */

        }

        /* .rectangles:hover {
            animation-play-state: paused;
        } */


        .rectangle {
            position: absolute;
        }

        .rectangle div {
            background-color: white;
            box-shadow: 0px 4px 12px rgba(70, 0, 255, 0.1), 0px 16px 32px rgba(165, 135, 255, 0.1);
            border-radius: 12px;
        }


        .rectangle span:nth-child(1) {
            color: #444BD3;
            font-size: 18px;
            margin: 5px 10px;
            display: inline-block;
        }

        .rectangle span:nth-child(2) {
            color: #444BD3;
            display: inline-block;
            width: 120px;
            font-size: 16px;
            margin: 5px 0px;
        }

        .rectangle span:nth-child(3) {
            color: black;
            display: block;
            font-size: 16px;
            width: 150px;
            letter-spacing: 10px;
            margin: 0px 0px 5px 10px;
        }

        .rectangle img {
            width: 160px;
            height: 50px;
            padding: 4px 5px 0px 3px;
        }

        /* 长方形的旋转和位置 */
        .rectangles li:nth-child(1) {
            transform: rotate(0deg) translateX(180px) translateY(0px);
        }

        .rectangles li:nth-child(2) {
            transform: rotate(0deg) translateX(140px) translateY(80px);
        }

        .rectangles li:nth-child(3) {
            transform: rotate(0deg) translateX(100px) translateY(160px);
        }

        .rectangles li:nth-child(4) {
            transform: rotate(0deg) translateX(-100px) translateY(160px);
        }

        .rectangles li:nth-child(5) {
            transform: rotate(0deg) translateX(-140px) translateY(80px);
        }

        .rectangles li:nth-child(6) {
            transform: rotate(0deg) translateX(-180px) translateY(0px);
        }

        .rectangles li:nth-child(7) {
            transform: rotate(0deg) translateX(-140px) translateY(-80px);
        }

        .rectangles li:nth-child(8) {
            transform: rotate(0deg) translateX(-100px) translateY(-160px);
        }

        .rectangles li:nth-child(9) {
            transform: rotate(0deg) translateX(100px) translateY(-160px);
        }

        .rectangles li:nth-child(10) {
            transform: rotate(0deg) translateX(140px) translateY(-80px);
        }


        /* 设置所有div自转 */
        .rectangles li div {
            animation: zizhuanX 10s linear infinite;
        }

        @keyframes zizhuanX {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(360deg);
            }
        }

        /* 设置整体公转 */
        @keyframes gongzhuan {
            from {
                transform: rotate(0deg);
            }

            to {
                transform: rotate(-360deg);
            }
        }
    </style>
</head>

<body>
    <div class="circle-container">
        <div class="center-circle"></div>
        <div class="center-circle2"></div>
        <div class="center-circle3"></div>
        <ul class="rectangles">
            <li class="rectangle">
                <div>
                    <span class="iconfont">&#xe670;</span><span>18 个</span><span>省份地区</span>
                </div>
            </li>
            <li class="rectangle">
                <div><img src="../resource/img/03.png" /></div>
            </li>
            <li class="rectangle">
                <div>
                    <span class="iconfont">&#xe60c;</span><span>500+ 家</span><span>集约化客户</span>
                </div>
            </li>
            <li class="rectangle">
                <div><img src="../resource/img/03.png" /></div>
            </li>
            <li class="rectangle">
                <div>
                    <span class="iconfont">&#xe642;</span><span>700+ 种</span><span>功能模块</span>
                </div>
            </li>
            <li class="rectangle">
                <div><img src="../resource/img/03.png" /></div>
            </li>
            <li class="rectangle">
                <div>
                    <span class="iconfont">&#xe6ee;</span><span>1000+ 套</span><span>医疗系统</span>
                </div>
            </li>
            <li class="rectangle">
                <div><img src="../resource/img/03.png" /></div>
            </li>
            <li class="rectangle">
                <div>
                    <span class="iconfont">&#xe79f;</span><span>1600+ 户</span><span>合作供应商</span>
                </div>
            </li>
            <li class="rectangle">
                <div><img src="../resource/img/03.png" /></div>
            </li>
        </ul>
        <div class="clapboard"></div>
    </div>

    <script type="text/javascript">
        window.onload = function () {
            // 获取body标签
            const rectangles = document.querySelector(".rectangles");
            const zizhuanXes = document.querySelectorAll(".rectangles li div");

            // 当鼠标进入页面区域时，暂停所有动画
            rectangles.addEventListener('mouseenter', function () {
                rectangles.style.animationPlayState = 'paused';
                zizhuanXes.forEach(function (element) {
                    element.style.animationPlayState = 'paused';
                });
            });

            // 当鼠标离开页面区域时，恢复所有动画
            rectangles.addEventListener('mouseleave', function () {
                rectangles.style.animationPlayState = 'running';
                zizhuanXes.forEach(function (element) {
                    element.style.animationPlayState = 'running';
                });
            });
        };
    </script>
</body>

</html>